<template>
  <div>
    <!-- el-table
              data:列表数据渲染
              el-table-column
                     label:标题
                     prop:相应项的字段名
              自定义栏
                 作用域插槽
                  template v-slot="{$index,row}"
                  $index:下标
                  row:当前行的内容
     -->
    <el-table :data="list">
      <el-table-column label="序号">
        <template v-slot="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="角色" prop="name" />
      <el-table-column label="描述" prop="dec" />
      <el-table-column label="操作">
        <template>
          <div>
            <el-button type="success">分配权限</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: '管理员',
          dec: '描述'
        }
      ]
    }
  }
}
</script>
<style></style>
